import React, { Component } from 'react'
import styles from './index.module.scss'
import MyNavBar from '../../components/MyNavBar'
import { getCurrentCity } from '../../utils/city'
import { Toast } from 'antd-mobile'
import { getOverlaysById, getHouseList } from '../../api/map'
import HouseItem from '../../components/HouseItem'
import classNames from 'classnames'


const BMap = window.BMap

// 圆形覆盖物的样式：
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid rgb(255, 0, 0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgb(255, 255, 255)',
  textAlign: 'center'
}

export default class Map extends Component {
  constructor () {
    super()

    this.state = {
      houseList: null,
      isShow: false
    }
  }


  initMap = async () => {
    if (!BMap) return
    const { label, value } = await getCurrentCity()
    // 创建地图实例
    this.map = new BMap.Map("container")
    this.map.addEventListener('touchstart', () => {
      this.setState({
        isShow: false
      })
    })
    // 创建地址解析器实例     
    var myGeo = new BMap.Geocoder();      
    // 将地址解析结果显示在地图上，并调整地图视野    
    myGeo.getPoint(
      label, 
      point => {      
      if (point) { 
          // 缩放级别3-18     
          this.map.centerAndZoom(point, 11);   
          
          // 显示一级覆盖物
          this.renderOverlays(value)      
      }      
    }, 
    label)
  }

  // 获取要渲染的覆盖物的类型('circle','rect')
  // nextZoom表示点击之后要放大的级别
  getRenderOverlayTypeAndNextZoom = () => {
    const currentZoom = this.map.getZoom()

    let type = 'circle'
    let nextZoom = 13
    if (currentZoom > 10 && currentZoom < 12) {
      type = 'circle'
      nextZoom = 13
    } else if (currentZoom > 12 && currentZoom < 14) {
      type = 'circle'
      nextZoom = 15
    } else if (currentZoom > 14) {
      type = 'rect'
    }
    return { type, nextZoom }
  }

  // 渲染各级覆盖物的方法
  renderOverlays = async id => {
    Toast.loading('数据加载中...')
    const res = await getOverlaysById(id)
    Toast.hide()

    const { type, nextZoom } = this.getRenderOverlayTypeAndNextZoom()

    console.log('房源数据',res);
    res.data.body.forEach(item => {
      if (type === 'circle') {
        this.renderCircleOverlay(item, nextZoom)
      } else {
        this.renderRectOverlay(item)
      }
      
    })
  }

  // 渲染一、二级覆盖物的方法
  renderCircleOverlay = ({
    coord:{ longitude, latitude },
    count,
    label: name,
    value: id
  },nextZoom) => {
    // 设置覆盖物的经纬度,顺序是固定的，前面是经度后面是纬度
    var point = new BMap.Point(longitude, latitude)
    var options = {
      position: point, // 制定文本标注所在的地理位置
      offset: new BMap.Size(-35, -35) // 设置文本偏移量
    }
    var label = new BMap.Label('', options) // 创建文本标注对象
    label.setContent(
      `<div class=${styles.bubble}><p class=${styles.name}>${name}</p><p class=${styles.name}>${count}套</p></div>`
    )
    label.setStyle(labelStyle)
    label.addEventListener('click', () => {
      setTimeout(()=>{
        // 清除掉现在已有的覆盖物
        this.map.clearOverlays()
      }, 0)
      // 更改地图的中心点和缩放级别
      this.map.centerAndZoom(point, nextZoom)
      // 调用renderOverlays，去加载点击覆盖物下面的二级覆盖物的数据
      this.renderOverlays(id)
    })

    // 把覆盖物添加到地图上
    this.map.addOverlay(label)

  }

  // 渲染第三级覆盖物
  renderRectOverlay = ({
    coord:{ longitude, latitude },
    count,
    label: name,
    value: id
  }) => {
    var point = new BMap.Point(longitude, latitude)
    var opts = {
      position: point,// 制定文本标注所在的地理位置
      offset: new BMap.Size(-50, -20) // 设置文本偏移量
    }
    var label = new BMap.Label('', opts) // 创建文本标注对象
    label.setContent(`
      <div class=${styles.rect}>
        <span class=${styles.housename}>${name}</span>
        <span class=${styles.housenum}>${count}</span>
      </div>
    `) 
    label.setStyle(labelStyle)
    label.addEventListener('click', e => {
      // 没有点击
      if (!e.changedTouches || !e.changedTouches[0]) return

      const { clientX, clientY } = e.changedTouches[0]

      const moveX = window.screen.width / 2 - clientX
      const moveY = window.screen.height / 2 - clientY - 330 / 2

      this.map.panBy(moveX, moveY)

      // 调用方法获取点击的覆盖物的房源列表
      this.getHouseListData(id)
    })

    // 把覆盖物添加到地图上
    this.map.addOverlay(label)
  }

  getHouseListData = async id => {
    const res = await getHouseList(id)

    this.setState({
      houseList: res.data.body.list,
      isShow: true
    })
  }

  componentDidMount () {
    this.initMap()
  }

  renderHouseList = () => {
    const { isShow, houseList } = this.state
    return (
      // classNames:按照变量的值动态拼接类名。isShow为true的时候添加show这个类，false的时候不添加
      <div className={classNames(styles.houseList, {[styles.show]: isShow})}>
        <div className={styles.titleWrap}>
          <h1 className={styles.listTitle}>房屋列表</h1>
          <a className={styles.titleMore} href="#/layout/houselist">更多</a>
        </div>
        <div className={styles.houseItems}>
          {
            houseList.map(item => {
              //  {...item}把每一项的各个数据用自定义属性的方式父传子
              return <HouseItem key={item.houseCode}  {...item}/>
            })
          }
        </div>
      </div>
    )
  }


  render() {
    const { houseList } = this.state
    return (
      <div className={styles.map}>
        <MyNavBar>地图找房</MyNavBar>
        <div id="container"></div>
        {houseList && this.renderHouseList()} 
      </div>
    )
  }
}
